<template>
	<view class="page">
		<custom-header title="基础信息" />
		<!-- #ifdef APP-PLUS -->
		<view style="height: 40px;"></view>
		<!-- #endif -->
		<u--form labelPosition="top" :model="model" ref="uForm" labelWidth="auto">
			<view class="form-panel">
				<u-form-item label="物料编码(非必填)" prop="materialBill" borderBottom>
					<u--input v-model="model.materialBill" border="none" placeholder="请输入物料编码" disabled></u--input>
				</u-form-item>
				<u-form-item label="物料大类" prop="provisionBroad" borderBottom>
					<h-dropdown class="w-100" keyName="categoryName" placeholder="请选择物料大类"
						:api="api.queryProvisionBroadList" v-model="model.provisionBroad" dataKey="result" border="none"
						@change="exportWarehouseChange" />
					<u-icon slot="right" name="arrow-down" color="#0003"></u-icon>
				</u-form-item>
				<u-form-item label="物料小类" prop="provisionSmall" borderBottom>
					<h-dropdown class="w-100" keyName="categoryName" placeholder="请选择物料小类" :columns="smallList"
						v-model="model.provisionSmall" dataKey="result" border="none" @change="exportWarehouseChange" />
					<u-icon slot="right" name="arrow-down" color="#0003"></u-icon>
				</u-form-item>
				<u-form-item label="物料名称" prop="materialName" borderBottom>
					<u--input v-model="model.materialName" border="none" placeholder="请输入物料名称" maxlength="100" ></u--input>
				</u-form-item>
				<u-form-item label="规格型号" prop="specification" borderBottom>
					<u--input v-model="model.specification" border="none" placeholder="请输入规格型号"></u--input>
				</u-form-item>
				<u-form-item label="品牌(非必填)" prop="brand" borderBottom>
					<u--input v-model="model.brand" border="none" placeholder="请输入品牌"></u--input>
				</u-form-item>
				<u-form-item label="制造商(非必填)" prop="manufacturer" borderBottom>
					<u--input v-model="model.manufacturer" border="none" placeholder="请输入制造商"></u--input>
				</u-form-item>
				<u-form-item label="产地(非必填)" prop="production" borderBottom>
					<u--input v-model="model.production" border="none" placeholder="请输入产地"></u--input>
				</u-form-item>
				<u-form-item label="参考价格(元)" prop="referencePrice" borderBottom>
					<h-money-input placeholder="请输入参考价格(元)" v-model="model.referencePrice" border="none"></h-money-input>
				</u-form-item>
				<u-form-item label="单位(非必填)" prop="unit" borderBottom>
					<h-select-input-tag class="w-100" v-model="model.unit" placeholder="请选择单位" border="none"
						dictName="unit_type" />
					<u-icon slot="right" name="arrow-down" color="#0003"></u-icon>
				</u-form-item>
				<u-form-item label="其他属性1(非必填)" prop="ohterOne">
					<custom-textarea-edit class="w-100" :value="model.ohterOne" pageTitle="其他属性1" border="none"
						maxlength="500" placeholder="请输入其他属性1" @input="ohterOneInupt($event)" @cancel="ohterOneCancel($event)" />
					<u-icon slot="right" name="arrow-right" color="#0003"></u-icon>
				</u-form-item>
				<u-form-item label="其他属性2(非必填)" prop="ohterTwo">
					<custom-textarea-edit class="w-100" :value="model.ohterTwo" pageTitle="其他属性2" border="none"
						maxlength="500" placeholder="请输入其他属性2" @input="ohterTwoInupt($event)" @cancel="ohterTwoCancel($event)" />
					<u-icon slot="right" name="arrow-right" color="#0003"></u-icon>
				</u-form-item>
				<u-form-item label="备注(非必填)" prop="remark">
					<custom-textarea-edit class="w-100" :value="model.remark" pageTitle="备注" border="none" maxlength="500"
						placeholder="请输入备注" @input="remarkInupt($event)" @cancel="remarkCancel($event)"/>
					<u-icon slot="right" name="arrow-right" color="#0003"></u-icon>
				</u-form-item>
			</view>
			<view class="space-x-1 px-1 btn_position">
				<u-button :disabled="isSubmit" type="primary" text="保存" @click="onSubmit"></u-button>
			</view>
			<view style="height: 100rpx;"></view>
		</u--form>
	</view>
</template>

<script>
import {
	queryProvisionBroadList,
	queryProvisionSmallList
} from '@/api/purchase/ErpPurchaseCannibalizeForm'
import APPTYPE from '@/config/appType.js';
export default {
	props: {},
	components: {},
	data() {
		return {
			APPTYPE: APPTYPE,
			smallList: [],
			api: {
				queryProvisionBroadList,
			},
			model: {
				commercialType: 2
			},
			isSubmit: false,
			formData: {}
		}
	},
	watch: {
		'model.provisionBroad'(val) {
			if (val) {
				this.findProvisionSmallList(val)
			}
		}
	},
	onLoad(options) {
		this.formData = JSON.parse(decodeURIComponent(options.formData)) || {};
	},
	created() {
		this.model = Object.assign({}, this.formData, this.model)
	},
	methods: {
		onSelect($event) {
			this.$set(this.model, 'provisionSmall', $event.id)
		},
		ohterOneInupt(val) {
			this.$set(this.model, 'ohterOne', val)
		},
		ohterTwoInupt(val) {
			this.$set(this.model, 'ohterTwo', val)
		},
		remarkInupt(val) {
			this.$set(this.model, 'remark', val)
		},
		ohterOneCancel(val) {
			this.$set(this.model, 'ohterOne', val)
		},
		ohterTwoCancel(val) {
			this.$set(this.model, 'ohterTwo', val)
		},
		remarkCancel(val) {
			this.$set(this.model, 'remark', val)
		},
		exportWarehouseChange(id) {
			// this.smallList = []
			// this.$set(this.model, 'provisionSmall', '')
			// if (id) {
			// 	this.findProvisionSmallList(id)
			// }
			// this.$nextTick(() => {
			// 	this.$refs.provisionSmall.loadData()
			// })
		},
		findProvisionSmallList(value) {
			const parentId = value
			queryProvisionSmallList({
				parentId
			}).then((res) => {
				if (res.success) {
					const data = res.result.map((item) => {
						return {
							id: item.id,
							categoryName: item.categoryName
						}
					})
					this.smallList = [data]
				} else {
					this.$u.toast(res.message)
				}
			})
		},
		onSubmit() {
			if (this.model.referencePrice === 0 || this.model.referencePrice === '0' || this.model.referencePrice === '0.00') {
				uni.showToast({
					title: '参考价格不能为零',
					icon: 'none'
				})
				return false
			}
			this.isSubmit = true;
			uni.$emit(this.APPTYPE.CONTACTUNIT, this.model);
			uni.navigateBack({
				delta: 1
			})
		}
	}
}
</script>

<style scoped lang="scss">
@import url("@/assets/inputStyle.scss");

.form-panel {
	margin-top: 54px;
	padding: 20rpx 40rpx 40rpx;
	background: #fff;
}

::v-deep .u-form-item__body__left__content__label {
	font-size: 14px;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.9);
}

::v-deep .u-input__content__field-wrapper__field {
	font-size: 14px !important;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.5) !important;
}
</style>